<script setup>
import {ref} from 'vue'
import {useRouter} from "vue-router";
import {useStore} from 'vuex'
import _axios from "@/plugins/axios";

const router = useRouter()
const username = ref("")
const password = ref("")
const store = useStore();

function doLogin() {
  _axios.post("",{}).then((res)=>{
    console.log(res)
  }).catch((error)=>{
    console.log(error)
  })

  if (username.value.length > 0 && password.value.length > 0) {
    console.log("登陆成功")
    // sessionStorage.setItem("isLogin", true)
    const response = {username: username.value, token: "ed5cf238-d8ce-49f9-a1cf-cef55d689a2b", id: 100};
    store.commit("login", response)
    // router.replace({name: "Index"})
    router.replace({name: "Index"})

  } else {
    console.log("登录失败")
  }

}
</script>

<template>
  <div class="main">
    <h2>登录界面</h2>
    <div class="frame">
      <p><label class="label_input">用户名：</label><input type="text" v-model="username"></p>
      <p><label class="label_input">密 码：</label><input type="password" v-model="password"></p>
      <input class="login" type="button" value="登录" @click="doLogin"/>
    </div>
  </div>
</template>

<style scoped>

.frame {
  //overflow:hidden;
  width: 500px;
  height: 200px;
  margin-top: 50px;
}

.main {
  width: 500px;
  margin: 20px auto;
  text-align: center;
}

.login {
  display: inline-block;
  width: 50px;
  margin-left: 220px;
}

.label_input {
  display: inline-block;
  width: 100px;
  margin-bottom: 20px;
  //height: 50px;
  //text-align: center;
  //line-height: 50px;
  //background-color: aqua;
}

</style>